<template>
  <div class="custom-legend">
    <ul class="legen-list" :style="{flexDirection: direction}">
      <li class="legen-item"
        v-for="(legen, index) in legens"
        :key="index"
        @click="clickLegen(legen)">
        <span class="dot"
          :style="{backgroundColor: linkage && legen.unSelect?'#666':legen.color}"></span>
        <p class="legen-text">{{legen.name}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
// https://cn.vuejs.org/v2/style-guide/#组件-实例的选项的顺序-推荐
export default {
  name: 'CustomLagend',
  components: {},
  model: {
    prop: 'legens',
    event: 'change'
  },
  props: {
    legens: {
      type: Array,
      default: () => []
    },
    linkage: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: 'row',
      validator: function (value) {
        return ['row', 'column'].indexOf(value) !== -1
      }
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    clickLegen(legen) {
      if (!this.linkage) {
        return
      }
      let legens = this.legens.map((l, i) => {
        if (l.name === legen.name) {
          return { ...l, unSelect: !legen.unSelect }
        } else {
          return { ...l }
        }
      })
      this.$emit('change', legens)
      this.$emit('select', legen)
    },
    init() {
      let tl = new TimelineMax({})
      let tw1 = TweenMax.to('.legen-list', 0.3, { opacity: 1 })
      let tw2 = TweenMax.staggerTo('.legen-item', 0.3, { opacity: 1 }, 0.1)
      tl.add(tw1, 0).add(tw2, 0.2)
      return tl
    }
  }
}
</script>
<style lang="scss" scoped>
$blue: #005cf0;
.custom-legend {
  color: #fff;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  .legen-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
 
    height: 34px;
    border-right: 1px solid $blue;

    background: linear-gradient($blue 2px, transparent 0) no-repeat 414px,
      linear-gradient(0deg, $blue 2px, transparent 0) no-repeat 414px;
    opacity: 0;
    .legen-item {
      display: flex;
      align-items: center;

      min-width: 80px;
      height: 16px;
      margin-right: 8px;
      padding-right: 5px;
      cursor: pointer;
      background: linear-gradient($blue 1px, transparent 0),
        linear-gradient(0deg, $blue 1px, transparent 0) no-repeat -4px,
        linear-gradient(
          -45deg,
          transparent 3px,
          $blue 3px,
          $blue 4px,
          transparent 0
        );
      background-size: 100% 100%, 100% 100%, 100% 100%;
      opacity: 0;
      &:nth-last-child(1) {
        margin-right: 0;
      }
      .dot {
        display: inline-block;

        position: relative;

        width: 8px;
        height: 8px;
        margin: 0 4px 0 4px;
        padding: 1px;
        border: 1px solid #005cf080;

        background-color: $blue;
        background-clip: content-box;
        &:after,
        &:before {
          display: block;

          position: absolute;
          top: -1px;

          background: $blue;

          content: '';
        }
        &:before {
          left: -4px;

          width: 2px;
          height: 3px;
        }
        &:after {
          left: -3px;

          width: 1px;
          height: 8px;
        }
      }
      .unselect {
        background-color: #666 !important;
      }
      .legen-text {
        width: 100%;

        opacity: 0.4;

        text-align: center;
      }
    }
  }
}
</style>
